<template>
  <!-- 个人中心页面 -->
  <el-row :gutter="20">
    <!-- 左侧 -->
    <el-col :span="12">
      <!-- 个人信息 -->
      <el-card>
        <el-descriptions direction="vertical" border style="margin-top: 20px">
          <el-descriptions-item :rowspan="2" :width="140" label="个人头像" align="center">
            <el-image
              style="width: 100px; height: 100px"
              src="https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif"
            />
          </el-descriptions-item>
          <el-descriptions-item label="姓名">HPMXW</el-descriptions-item>
          <el-descriptions-item label="电话">18100000000</el-descriptions-item>
          <el-descriptions-item label="地址">北京市通州区</el-descriptions-item>
          <el-descriptions-item label="个人标签">
            <el-tag type="primary" size="small" class="mr">全栈开发</el-tag>
            <el-tag type="primary" size="small" class="mr">前端开发</el-tag>
            <el-tag type="primary" size="small" class="mr">代码洁癖</el-tag>
          </el-descriptions-item>
        </el-descriptions>
      </el-card>
      <!-- 日历 -->
      <el-card class="mt">
        <el-calendar v-model="value" />
      </el-card>

      <!-- 分步表单 -->
      <el-card class="mt">
        <template #header>
          <span>完善个人资料</span>
        </template>

        <el-row :gutter="20">
          <el-col :span="16">
            <!-- 分布表单组件 -->
            <StepForm
              :steps="steps"
              :form1="form1"
              :form2="form2"
              @handle-submit="handleSubmit"
            >
              <!-- 插槽1  -->
              <template #step-1>
                <el-form :model="formData.basicInfo" ref="form1">
                  <el-form-item label="姓名">
                    <el-input
                      v-model="formData.basicInfo.name"
                      placeholder="请输入姓名"
                    />
                  </el-form-item>
                  <el-form-item label="电话">
                    <el-input v-model="formData.basicInfo.tel" placeholder="请输入电话" />
                  </el-form-item>
                  <el-form-item label="地址">
                    <el-input
                      v-model="formData.basicInfo.address"
                      placeholder="请输入地址"
                    />
                  </el-form-item>
                </el-form>
              </template>

              <!-- 插槽2 -->
              <template #step-2>
                <el-form :model="formData.job" ref="form2">
                  <el-form-item label="在职状态">
                    <el-select v-model="formData.job.status" placeholder="请选择在职状态">
                      <el-option label="工作中" value="1" />
                      <el-option label="请假中" value="2" />
                      <el-option label="出差中" value="3" />
                      <el-option label="年假中" value="4" />
                    </el-select>
                  </el-form-item>
                </el-form>
              </template>
            </StepForm>
          </el-col>
          <el-col :span="8">
            <!-- 进度条 组件 -->
            <div
              style="
                display: flex;
                align-items: center;
                flex-direction: column;
                justify-content: space-around;
              "
            >
              <h3 style="margin-bottom: 40px">资料完善度</h3>
              <el-progress type="circle" :percentage="85" />
            </div>
          </el-col>
        </el-row>
      </el-card>
    </el-col>

    <!-- 右侧-消息通知 -->
    <el-col :span="12">
      <!-- 消息按钮 -->
      <el-card>
        <el-badge :value="12" class="mr">
          <el-button>待办事项</el-button>
        </el-badge>
        <el-badge :value="3" class="mr">
          <el-button>指派给我</el-button>
        </el-badge>
        <el-badge :value="1" class="mr">
          <el-button>部门公告</el-button>
        </el-badge>
        <el-badge :value="2" class="mr">
          <el-button>站内信</el-button>
        </el-badge>
        <el-badge :value="1" class="mr" type="primary">
          <el-button>我指派的</el-button>
        </el-badge>
      </el-card>

      <!-- 消息列表 -->
      <el-card class="mt">
        <el-collapse v-model="activeNames">
          <el-collapse-item title="会议通知" name="1">
            <div
              class="mt"
              style="display: flex; align-items: center; justify-content: space-between"
            >
              <h3>每周一上午10:00召开项目例会-admin+user</h3>
              <el-button
                type="primary"
                size="small"
                class="mr"
                v-permission="['admin', 'user']"
                >去处理</el-button
              >
            </div>
          </el-collapse-item>
          <el-collapse-item title="会议通知" name="2">
            <div
              class="mt"
              style="display: flex; align-items: center; justify-content: space-between"
            >
              <h3>召开项目例会-user</h3>
              <el-button type="primary" size="small" class="mr" v-permission="'user'"
                >去处理</el-button
              >
            </div>
          </el-collapse-item>
          <el-collapse-item title="会议通知" name="3">
            <div
              class="mt"
              style="display: flex; align-items: center; justify-content: space-between"
            >
              <h3>每周一上午10:00召开项目例会-admin</h3>
              <el-button type="primary" size="small" class="mr" v-permission="['admin']"
                >去处理</el-button
              >
            </div>
          </el-collapse-item>
          <el-collapse-item title="会议通知" name="4">
            <div
              class="mt"
              style="display: flex; align-items: center; justify-content: space-between"
            >
              <h3>每周一上午10:00召开项目例会</h3>
              <el-button type="primary" size="small" class="mr">去处理</el-button>
            </div>
          </el-collapse-item>
          <el-collapse-item title="会议通知" name="5">
            <div
              class="mt"
              style="display: flex; align-items: center; justify-content: space-between"
            >
              <h3>每周一上午10:00召开项目例会</h3>
              <el-button type="primary" size="small" class="mr">去处理</el-button>
            </div>
          </el-collapse-item>
          <el-collapse-item title="会议通知" name="6">
            <div
              class="mt"
              style="display: flex; align-items: center; justify-content: space-between"
            >
              <h3>每周一上午10:00召开项目例会</h3>
              <el-button type="primary" size="small" class="mr">去处理</el-button>
            </div>
          </el-collapse-item>
          <el-collapse-item title="会议通知" name="7">
            <div
              class="mt"
              style="display: flex; align-items: center; justify-content: space-between"
            >
              <h3>每周一上午10:00召开项目例会</h3>
              <el-button type="primary" size="small" class="mr">去处理</el-button>
            </div>
          </el-collapse-item>
        </el-collapse>
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import { ref } from "vue";

// ======= 日期组建 功能逻辑 =======
const value = ref(new Date());

// ======= 分步表单 功能逻辑 =======
// 引入分布表单组件
import StepForm from "@/components/stepForm/StepForm.vue";

// 定义步骤数据
const steps = [{ title: "基本信息" }, { title: "在职信息" }];

// 引入 表单验证 功能
import type { FormInstance } from "element-plus";

// 定义 form1, form2 的引用
const form1 = ref<FormInstance>();
const form2 = ref<FormInstance>();

// 定义表单数据
const formData = ref({
  basicInfo: { name: "", tel: "", address: "" },
  job: { status: "" },
});

// 分布子组件提交事件
const handleSubmit = () => {
  console.log("提交表单", formData.value);
};

// ======= 消息列表是否展开 功能逻辑 =======
const activeNames = ref(['1', '2', '3', '4', '5', '6', '7']);

</script>

<style scoped></style>
